<template>
	<div>
		<div class="tabNav">
			<router-link to="/index">
                <img src="../assets/img/sidebar1.png" />首页
            </router-link>
			<router-link to="/settlement">
				<b class="colors">/<img style="top: 1px" src="../assets/img/sidebar7.png" />结算信息</b>
            </router-link>
			<b>/<i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-order"></i>结算信息详情</b>
			<!-- <el-input placeholder="请输入灵活用工平台名称进行搜索" suffix-icon="el-icon-search" v-model="input1">
			</el-input> -->
			<em style="margin-left: -5px;">结算明细信息</em>
		</div>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee" shadow="hover">
					<div class="cardTit">结算明细
					</div>
					<el-table :data="tableData" stripe style="width: 100%" @sort-change="sortChange">
						<el-table-column width="30">
						</el-table-column>
						<el-table-column prop="legalName" sortable="custom" label="姓名">
						</el-table-column>
						<el-table-column prop="phone" sortable="custom" label="联系电话">
						</el-table-column>
						<el-table-column prop="socialCreditCode" sortable="custom" width="140" label="统一社会信用代码">
						</el-table-column>
						<el-table-column prop="startTime" sortable="custom" width="148" label="结算开始时间">
							<template #default="item">
								{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.startTime)) }}
							</template>
						</el-table-column>
						<el-table-column prop="finishedTime" sortable="custom" label="结算完成时间" width="148">
							<template #default="item">
								<template v-if="item.row.finishedTime == null">
									--
								</template>
								<template v-else>
									{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.finishedTime)) }}
								</template>
							</template>
						</el-table-column>
						<el-table-column prop="receiveCardNo" sortable="custom" width="160" label="收款卡号">
						</el-table-column>
						<el-table-column prop="receiveBank" sortable="custom" label="收款银行">
						</el-table-column>
						<el-table-column prop="subFee" sortable="custom" label="实际服务费" width="">
							<template #default="item">
							<template v-if="item.row.subFee == null">--</template>
							<template v-else>{{ formatNumber(item.row.subFee) }}</template>
							</template>
						</el-table-column>
						<el-table-column prop="caozuo" label="操作" class-name="editor">
							<template #default="item">
								<el-button type="text" @click="settlementDetails(item.row.settlementNo, item.row.businessId)">详情</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination v-if="tableData.length > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="currentPage" :page-sizes="arrPage" :page-size="selectPage"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</el-card>
			</el-col>
		</el-row>

		<!-- 点击详情 结算任务明细 -->
		<el-dialog title="结算任务明细" custom-class="examine-style" v-model="settlementDetailShow" width="80%">
			<div class="cardTits">
				<el-table :data="settlementDetailArr" stripe style="width: 100%" @sort-change="sortChange1">
					<el-table-column width="30">
					</el-table-column>
					<el-table-column prop="taskName" sortable="custom" label="任务名称">
					</el-table-column>
					<el-table-column prop="subFee" sortable="custom" label="实际服务费">
						<template #default="item">
							{{ formatNumber(item.row.subFee) }}
						</template>
					</el-table-column>
					<el-table-column prop="subFee" sortable="custom" label="预计服务费">
						<template #default="item">
							<template v-if="item.row.fine == 0">
								{{ formatNumber(item.row.subFee - item.row.bonus) }}
							</template>
							<template v-else>
								{{ formatNumber(item.row.subFee + item.row.fine) }}
							</template>
						</template>
					</el-table-column>
					<!-- <el-table-column prop="createTime" sortable="custom" width="100" label="生成时间">
						<template #default="item">
							{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
						</template>
					</el-table-column> -->
					<!-- <el-table-column prop="name" sortable="custom" label="接单个体户">
					</el-table-column> -->
					<el-table-column prop="legalName" sortable="custom" label="个体户经营者" width="120" align="center">
					</el-table-column>
					<el-table-column prop="phone" sortable="custom" label="电话号码" width="100">
					</el-table-column>
					<!-- <el-table-column prop="socialCreditCode" sortable="custom" width="150" label="统一社会信用代码">
					</el-table-column> -->
					<el-table-column prop="takeStatus" label="是否领取" align="center">
						<template #default="scope">
							{{ scope.row.takeStatus == 1 ? '是' : '否' }}
						</template>
					</el-table-column>
					<el-table-column prop="isComplete" label="是否完成" align="center">
						<template #default="scope">
							{{ scope.row.isComplete == 1 ? '是' : '否' }}
						</template>
					</el-table-column>
					<el-table-column prop="bonus" sortable="custom" label="奖励" width="70" align="center">
						<template #default="item">
							{{ formatNumber(item.row.bonus) }}
						</template>
					</el-table-column>
					<el-table-column prop="fine" sortable="custom" label="处罚" width="70" align="center">
						<template #default="item">
							{{ formatNumber(item.row.fine) }}
						</template>
					</el-table-column>
					<!-- <el-table-column prop="auditStatus" label="审核状态" align="center">
						<template #default="scope">
							{{ auditStatus[scope.row.auditStatus] }}
						</template>
					</el-table-column> -->
				</el-table>
				<el-pagination v-if="settlementDetailArr.length > 0" @size-change="renwuPageChange" @current-change="renwuCurrentChange"
					:current-page="renwuCurrentPage" :page-sizes="renwuArrPage" :page-size="renwuSelectPage"
					layout="total, sizes, prev, pager, next, jumper" :total="renwuTotal">
				</el-pagination>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	export default {
		name: "dashboard",
		data() {
			return {
				orderByZH: false,
				orderByAsc: false,
				orderByColume: 'createTime',
				currentPage: 1,
				total: 0, // 总条数
				arrPage: [10, 20], // 每页条数
				selectPage: 10, // 每页选中条数
				tableData: [],
				renwuTotal: 0, // 结算任务明细总条数
				renwuCurrentPage: 1, // 结算任务明细当前页
				renwuArrPage: [10, 20], // 结算任务明细每页条数
				renwuSelectPage: 10, // 结算任务明细每页选中条数
				settlementDetailArr: [], // 任务结算明细table数据
				settlementDetailShow: false, // 是否显示结算任务明细
				input1: '',
				auditStatus: {
					0: '待审核'
				},
				id: '',
				busid: ''
			};
		},
		components: {},
		mounted() {
			console.log(this.$route.query.codeNo)
			this.getTableData();
		},
		computed: {
			role() {
				return this.name === "admin" ? "超级管理员" : "普通用户";
			}
		},

		methods: {
			handleSizeChange(val) {
				this.selectPage = val
				this.getTableData()
			},
			handleCurrentChange(val) {
				// 切换当前页
				this.currentPage = val
				this.getTableData()
			},
			settlementDetails(id, busid) {
				// 结算任务明细
				this.id = id
				this.busid = busid
				this.settlementDetailShow = true
				this.getRenwuTableData(1, 10)
			},
			renwuCurrentChange(val) {
				// 结算任务明细切换分页
				this.renwuCurrentPage = val
				this.getRenwuTableData(this.renwuCurrentPage, 10)
			},
			renwuPageChange(val) {
				// 结算任务明细切换当前页显示条数
				this.renwuSelectPage = val
				this.renwuCurrentPage = 1
				this.getRenwuTableData(1, this.renwuSelectPage)
			},
			getTableData() {
				// 获取列表信息
				this.$http({
					url: '/api/settlement/selectSevicerListByNo',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						// "settlementNo": "",
						"settlementNo": this.$route.query.codeNo,
						"businessId": 0,
						"platformId": "",
						"pageNum": this.currentPage,
						"pageSize": this.selectPage,
						orderByAsc: this.orderByAsc, // 是否正序
						orderByColume: this.orderByColume, // 排序字段
						orderByZH: this.orderByZH, // 是否汉字
					}
				}).then(data => {
					console.log(data)
					if(data.code === 0) {
						this.tableData = data.result.list
						this.total = data.result.total
					}
				})
			},
			getRenwuTableData(current, select) {
				// 获取结算任务明细列表
				this.$http({
					url: '/api/settlement/selectTaskListByNo',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						// "settlementNo": "",
						"settlementNo": this.id,
						"businessId": this.busid,
						"platformId": "",
						"pageNum": current,
						"pageSize": select,
						orderByAsc: this.orderByAsc, // 是否正序
						orderByColume: this.orderByColume, // 排序字段
						orderByZH: this.orderByZH, // 是否汉字
					}
				}).then(data => {
					console.log(data)
					if(data.code === 0) {
						this.settlementDetailArr = data.result.list
						this.renwuTotal = data.result.total
					}
				})
			},
			sortChange(d) {
				// 监听排序
				if(d.prop == null) {
					// 默认排序方式
					this.orderByZH = false
					this.orderByAsc = false
					this.orderByColume = 'createTime'
				}else {
					let orderByZH = false
					if(d.id == "legalName"|| d.id == "receiveBank") {
						orderByZH = true
					}
					this.currentPage = 1
					this.selectPage = 10
					let orderByAsc = d.order == "descending" ? false : true
					this.orderByZH = orderByZH
					this.orderByAsc = orderByAsc
					this.orderByColume = d.id
				}
				this.getTableData();
			},
			sortChange1(d) {
				// 监听排序
				if(d.prop == null) {
					// 默认排序方式
					this.orderByZH = false
					this.orderByAsc = false
					this.orderByColume = 'createTime'
				}else {
					let orderByZH = false
					if(d.id == "taskName"|| d.id == "legalName") {
						orderByZH = true
					}
					this.currentPage = 1
					this.selectPage = 10
					let orderByAsc = d.order == "descending" ? false : true
					this.orderByZH = orderByZH
					this.orderByAsc = orderByAsc
					this.orderByColume = d.id
				}
				this.getRenwuTableData(1, this.renwuSelectPage)
			},
		}
	};
</script>
